<template>
    <div>
        <div style="padding-bottom: 10px">
            <Button type="success" @click="showAdd">添加
                <Icon type="ios-add-circle-outline"/>
            </Button>
        </div>
        <div style="padding-bottom: 10px">
            <Input suffix="ios-search" placeholder="输入值" style="width: auto;margin-right: 10px"/>
            <Button style="margin-right: 10px" type="primary">按部门名</Button>
            <Button style="margin-right: 10px" type="success">按姓名</Button>
            <Button style="margin-right: 10px" type="error">按分组名</Button>
        </div>
        <Table :columns="columns11" :data="data10" border height="350">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="edit(index)">修改</Button>
                <Button type="error" size="small" @click="remove(index)">删除</Button>
            </template>
        </Table>
        <Page :total="100" show-sizer style="padding-top: 10px"/>
        <Modal v-model="show_add" fullscreen title="添加成员">
            <member-form></member-form>
        </Modal>
    </div>

</template>
<script>

    import MemberForm from "../../../components/MemberForm";

    export default {
        components:{
            MemberForm
        },
        name: "Member",
        data() {
            return {
                show_add:false,
                columns11: [
                    {
                        title: '姓名',
                        key: 'userName',
                        align: 'center',
                        width: 200,
                        fixed: 'left',
                        // filters: [
                        //     {
                        //         label: 'Joe',
                        //         value: 1
                        //     },
                        //     {
                        //         label: 'John',
                        //         value: 2
                        //     }
                        // ],
                        // filterMultiple: false,
                        // filterMethod (value, row) {
                        //     if (value === 1) {
                        //         return row.name === 'Joe';
                        //     } else if (value === 2) {
                        //         return row.name === 'John Brown';
                        //     }
                        // }
                    },
                    {
                        title: '性别',
                        key: 'userGender',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '部门',
                        key: 'deptName',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '分组',
                        key: 'gpName',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '手机',
                        key: 'userPhone',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '邮箱',
                        key: 'email',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '微信',
                        key: 'userWx',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '地址',
                        key: 'userAddress',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '身份证',
                        key: 'userIdcard',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '入职时间',
                        key: 'userIndate',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '状态',
                        key: 'userState',
                        align: 'center',
                        width: 200
                    },
                    {
                        title: '操作',
                        key: 'operate',
                        align: 'center',
                        slot: 'action',
                        width: 200,
                        fixed: 'right'
                    }
                ],
                data10: []
            }
        },
        mounted() {
            const data = [];
            for (let i = 0; i < 10; i++) {
                data.push({
                    key: i,
                    userName: 'John Brown',
                    userGender: '男',
                    userPhone: '13726273872',
                    deptName: '研发部',
                    gpName: "研发一组",
                });
            }
            this.data10 = data;
        },
        methods: {
            remove(index) {

            },
            edit(index) {

            },
            add(){

            },
            showAdd(){
                this.show_add=!this.show_add
            }
        }
    }
</script>